<template>
  <div class="w-100 h-1 flex-1">
    <div v-if="showImg" class="w-100 h-100 flex align-center justify-center background-image">
      <img
        style="min-width: 400px; width: 50%; height: auto"
        :src="deviceImg"
        @click="showPortTab"
      >
    </div>
    <div v-show="!showImg" class="port-box p-20 h-100 overflow-auto">
      <div v-for="face in newfaceList" :key="face.partId">
        <h3 class="mb-10">
          {{ rowData.nodeType !== 'AFS' ? face.deviceName : '' }}
          {{ face.partFlag.replace('M', 'B') + ' ' + $t('FACE') }}
        </h3>
        <div class="flex flex-wrap justify-center">
          <div
            v-for="(group, groupIndex) in Math.ceil(face.portList.length / 12)"
            :key="group"
            class="flex justify-around mb-20 border-box mr-20 ml-20"
          >
            <div class="flex align-center p-5">
              <span class="font-mini text-color text-center mr-10 port-order">
                {{
                  ` ${group * 12 - 11} ~ ${
                    group * 12 > face.portList.length ? face.portList.length : group * 12
                  }`
                }}
              </span>
              <div class="flex flex-1 justify-around" style="width: 360px">
                <div v-for="(item, itemIndex) in 12" :key="item" class="port-img">
                  <template v-if="face.portList[groupIndex * 12 + itemIndex]">
                    <img
                      :class="
                        portData(face.portList[groupIndex * 12 + itemIndex]) ? 'scaleImg' : ''
                      "
                      :title="face.portList[groupIndex * 12 + itemIndex].portInfo.bizName"
                      :src="getImg(face.portList[groupIndex * 12 + itemIndex])"
                      @click="portClick(face.portList[groupIndex * 12 + itemIndex])"
                    >
                    <EidPopover :eid-data="face.portList[groupIndex * 12 + itemIndex]" />
                  </template>
                  <span v-else style="width: 16px" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="loadmore" />
    </div>
  </div>
</template>

<script>
  import mixin from './mixin'
  import EidPopover from './EidPopover'
  export default {
    components: { EidPopover },
    mixins: [mixin],
    data() {
      return {}
    },
    methods: {
      portData(portData) {
        return (
          portData.selected ||
          (this.selectedPort && this.selectedPort.connPortId === portData.portInfo.portId)
        )
      }
    }
  }
</script>

<style lang="scss" scoped>
  .port-img {
    transition: all 0.3s;
  }
  .scaleImg {
    transform: scale(1.3);
  }
</style>
